<template>
    <div class="index">   
        <header>
            <p>北京破产法庭诉讼指引</p>
        </header>
        <div class="centent">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <router-link to="fygk">
                            <img src="../../assets/img/fggk.png" alt="">
                            <span>法官概况</span>
                        </router-link>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <router-link to="gzzz">
                            <img src="../../assets/img/gzzz.png" alt="">
                            <span>工作职责</span>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">

                        <router-link to="gxfw">
                            <img src="../../assets/img/gxfw.png" alt="">
                            <span>管辖范围</span>
                        </router-link>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <router-link to="personMsg">
                            <img src="../../assets/img/ryxx.png" alt="">
                            <span>人员信息</span>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content">
                        <router-link to="jgmc">
                            <img src="../../assets/img/jgmc.png" alt="">
                            <span>机构名册</span>  
                         </router-link>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <router-link to="map">
                            <img src="../../assets/img/fgdt.png" alt="">
                            <span>法庭地图</span>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
            
        </div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {

            }
        } 
    }
</script>

<style lang="less">
    .index{
        header{
            height: 150px;
            background: url('../../assets/img/header_bg.png') no-repeat;
            background-size: 100% 100%;
            p{
                color:#fff;
                font-size: 48px;
                text-align: center;
                line-height: 145px;
            }
        }
        .centent{
            height: 1770px;
            background: url('../../assets/img/bg.png') no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding-top:150px;
            .grid-content{
                text-align: center;
                margin-bottom: 15px;
               span {
                    display: block;
                    color: #fff;
                    height: 120px;
                    font-size: 36px;
                    background: url('../../assets/img/text_bg.png') no-repeat center;
                    background-size: 44%;
                    line-height: 76px;
                    background-position: 150px 36px;
                }
            }
        }
    }
</style>